<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
</head>
<body>
<div id="app">
{{str}}
<com-b></com-b>
</div>
<script>

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName
    this.lastName = lastName
  }
}

const ComC={
    // props:['info'],
    props:{
        // info:{
            type:Number,
            // required:true,
            // default:'abcd',
//             default(rawProps){
// console.log(rawProps);
// return { a:'efg'}
//             }

// validator(value){
// return [1,2,3].includes(value)
// }
//         }

info:Person,

    },
data() {
    return {
        str:'我是C'
    }
},
template:'<h2>{{str}}</h2> <p>{{info}}</p>'
};
const ComD={
    data() {
    return {
        str:'我是D'
    }
}, 
template:'<h2>{{str}}</h2>'
};
const ComB={
    data() {
    return {
        str:'我是B',
        // info:{
        //     a:'我是来源与B的数据',
        // }
        // info:13333,
        info:new Person('张','三')
    }
},
template:`<h2>{{str}}</h2>
<com-c :info="info"></com-c>
<com-d></com-d>
`,
components:{
    ComC,ComD
}
}

const app = Vue.createApp({
data() {
return {
    str:'我是A'
};
},
methods: {
},
computed: {
},
watch: {
},
components:{
    ComB
}
}).mount("#app");
</script>
</body>
</html>